import { formatMoment } from '@/utils/time-utils';
import React from 'react';
import styles from './index.module.less'

// 这个作用是什么, 新建一个模型?
// 但是外部传入的时候依然是传递 data={item} hasButton={hasButton} 并没有组成模型传递
interface Props {
  hasAvatar?: boolean;
  hasButton?: boolean;
  withStatus?: boolean;
  [propName: string]: any;
}


const ApproveCard: React.FC<Props> = (props) => {
  // 现在不用states了吗
  // const {} 里面的值代表外面传递过来的变量?
  const { data, hasAvatar, hasButton, withStatus } = props;
  // moment是个日期处理库
  // 类型还能用 | ??? 
  const getTime = (time: Date | moment.Moment) => {
    // 传递过来的值不是静态的? 可以直接赋值?
    time = formatMoment(time);
    /*
    interface CalendarSpec {
    sameDay?: CalendarSpecVal;
    nextDay?: CalendarSpecVal;
    lastDay?: CalendarSpecVal;
    nextWeek?: CalendarSpecVal;
    lastWeek?: CalendarSpecVal;
    sameElse?: CalendarSpecVal;

    // any additional properties might be used with moment.calendarFormat
    [x: string]: CalendarSpecVal | undefined;
  }
    */

    // 是否抛弃了 let var 的定义形式, 目前看到全是const
    // 如果定义一个局部变量呢
    const timeStr = time.calendar(null, {
      sameDay: 'HH:mm',
      lastDay: '[昨天] HH:mm',
      // 这个是自定义的吧
      beforeLastDay: '[前天] HH:mm',
      otherYears: 'YYYY-MM-DD HH:mm',
      sameElse: 'MM-DD HH:mm'
    });

    return timeStr;
  };

  // 使用 { boolean? 三目 来按需加载div}
  // 使用 { boolean && 来按需加载div} 

  return (
    <div className={styles['wrap']}>
      <div className={styles['title']}>
        <div className={styles['left-part']}>
          {
            hasAvatar ?
              data.crtUserImg ?
                <img className={styles['title-pic']} src={data.crtUserImg} alt="" />
                :
                <div className={styles['title-pic']}>{data.crtUserName?.substr(-2)}</div>
              : ''
          }
          <span className={styles['title-text']}>{data?.documentTitle || data?.documentName || '无'}</span>
          {
            withStatus &&
            ''
          }
        </div>
        <div className={styles['right-part']}>
          <span className={styles['time']}>{getTime(data?.crtTime)}</span>
        </div>
      </div>
      <div className={styles['detail-info']}>
        {
          data?.formData?.map((item: { label: string; value: string }, index: number) => (
            <div className={styles['info-item']} key={index}>
              <span className={styles['info-item-title']}>{item.label}</span>
              <span className={styles['info-item-content']}>{item.value}</span>
            </div>
          ))
        }
      </div>
      {
        hasButton &&
        <div className={styles['button-wrap']}>

        </div>
      }
    </div>
  );
}

export default ApproveCard;